<!-- 本页面为  select框组件 -->

<script setup>
//导入获取服务器文章分类方法
import { ref } from 'vue'
import { artGetChannelsService } from '@/api/article.js'

//接受父组件传来
defineProps({
  modelValue: {
    type: [Number, String]
  }
})
//通过defineEmit编译器宏生成emit方法(与setup平级)
const emit = defineEmits(['update:modelValue'])

//获取分类数据--select内容
const channelList = ref([])
const getChannelList = async () => {
  const res = await artGetChannelsService()
  channelList.value = res.data.data
  //console.log(channelList.value)
}
getChannelList()
</script>

<template>
  <!--:model="modelValue"---→接受父组件的数据
      @update:modelValue ---→监听选择器 modelValue更新
      触发emit  $event是选中的参数-->
  <el-select
    :model-value="modelValue"
    @update:model-value="emit('update:modelValue', $event)"
  >
    <!-- label展示给用户看的，value收集起来提交给后台的 -->
    <el-option
      v-for="channel in channelList"
      :key="channel.id"
      :label="channel.cate_name"
      :value="channel.id"
    ></el-option>
  </el-select>
</template>
